@main-color: #0064b2;
html {
    font-size: 26.6667vw;
}

body {
    font: .14rem/120% '微软雅黑';
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

img {
    vertical-align: middle;
}

.hide {
    display: none;
}

// 头部区域
#header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    background-color: @main-color;
    color: #fff;
    width: 100vw;
    z-index: 10;
    .left {
        text-align: center;
        width: .45rem;
        height: .45rem;
        a {
            display: block;
            color: #fff;
            font-size: .16rem;
            line-height: .45rem;
        }
    }
    .center {
        flex: 1; // line-height: .45rem;
        text-align: center;
        h4 {
            // MUI 默认自带行高
            line-height: .45rem;
            font-weight: normal;
        }
        form {
            padding-top: .05rem;
            input {
                width: 100%;
                height: .34rem;
                padding: .05rem .2rem;
                margin-bottom: 0;
                border-radius: .06rem;
                font-size: .14rem;
                box-sizing: border-box;
                background-color: #fff;
                text-align: left;
                color: #666;
            }
        }
    }
    .right {
        width: .45rem;
        height: .45rem;
        line-height: .45rem;
        text-align: center;
        i {
            font-size: .16rem;
        }
        a {
            color: #fff;
            font-size: .16rem;
        }
    }
}

// 中间区域
#main {
    position: relative;
    padding: .45rem 0;
    height: 100vh; // MUI 组件
    // .mui-scroll-wrapper {
    //     position: relative;
    //     height: 100%;
    // }
    // MUI的区域滚动样式修改  把容器绝对定位改成相对定位 设置高度和main内容一样
    .mui-scroll-wrapper {
        // 把默认绝对定位改成相对定位
        position: relative; // 把这个区域滚动的盒子高度设置为100% 和main的内容一样
        height: 100%;
    } // swiper的内容滚动样式修改 给父容器高度固定100% 子容器高度auto
    .swiper-container {
        height: 100%; // 子容器的高度 为auto
        .swiper-slide {
            height: auto;
        }
    }
    .search-form {
        padding: .1rem;
        form {
            display: flex;
            input {
                flex: 1;
                height: .36rem;
                border: 1px solid @main-color;
                background-color: #fff;
                font-size: .14rem;
                text-align: left;
                border-radius: .06rem 0 0 .06rem;
                margin-bottom: 0;
            }
            button {
                width: .6rem;
                height: .36rem;
                background: @main-color;
                border-radius: 0 .06rem .06rem 0;
                border-color: @main-color;
            }
        }
    } // 遮罩层
    .mask {
        z-index: 5;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #232323;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            width: 100%;
        }
    }
}

// 页尾区域
#footer {
    width: 100vw;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: @main-color;
    z-index: 10;
    a {
        display: flex;
        height: .45rem;
        color: #fff;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        i {}
        span {
            font-size: .12rem;
            line-height: 1;
        }
        &.active {
            color: #ff7104;
        }
    }
}
